<template>
  <div id="medical_records">
    <header>
      <i @click="goBack()"></i>
      <div>病历记录</div>
      <span @click='addMedical_records' v-if="name!='doctor'">新建</span>
    </header>
    <div class="nav">
      <div @click='tabToggle(0,sentPage,"click")'>
        <a class="active">
          <b>已签字病历</b>
        </a>
      </div>
      <div @click='tabToggle(1,sentPage,"click")'>
        <a class="">
          <b>未签字病历</b>
        </a>
      </div>
    </div>
    <div class="swipe">
      <div class='mc' v-if="list.length<1">
        <img src="../../../image/no_record@2x.png" width='74' alt="">
        <p>目前还没有任何病历记录!</p>
      </div>
      <Loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" :autoFill="false">
        <ul class="list">
          <li v-for="(item,index) in list" :key='index'>
            <router-link :to='{name:"medical_details",query: {id:item.id,doctorname: doctorname,status:"1",pid:pid}}'>
              <ul>
                <li>
                  <span class='bold'>
                    {{item.time}} &nbsp;&nbsp;{{item.type}}
                  </span>
                  <span v-if="status=='病历记录'">{{doctorname}}</span>
                </li>

                <li class='noPadding'>
                  <span class='border'>诊断</span>
                  <div>
                    {{item.diagnose}}
                  </div>
                </li>
                <li class='noPadding'>
                  <span class='border'>处置</span>
                  <div>
                    {{item.cure}}
                  </div>
                </li>
              </ul>
            </router-link>
          </li>
        </ul>
      </Loadmore>
    </div>
  </div>
</template>
<script>
  import {
    Loadmore
  } from 'mint-ui';
  export default {
    data() {
      return {
        doctorname: '', //医生名字
        name: '',
        // id:'',//患者id
        pid: '', //患者id
        list: [],
        userid: '',
        sentPage: {
          page: 1,
          rows: "10"
        }, //接口入参
        totalNum: 0, //总数据条数
        allLoaded: false, //分页数据是否已经加载完毕
        status: '', //是某个患者的病历 还是该医生所有病历 病历记录 工作记录 
      }
    },
    components: {
      Loadmore,
    },
    methods: {
      goBack() {
        this.$router.push({
          name: 'clinicDetails',
          query: {
            pid: this.$route.query.pid,
          }
        });
      },
      //新建病例记录
      addMedical_records() {
        this.$router.push({
          name: 'edit_medical',
          query: {
            status: 'add',
            pid: this.pid
          }
        });
      },
      tabToggle(i, params, click) { //0已完成 1未完成
        $('.nav div a').eq(i).addClass('active');
        $('.nav div').eq(i).siblings().find('a').removeClass();
        //每点击一次初始化
        if (click) {
          this.list = [];
          this.sentPage.page = 1;
        }
        this.userid = localStorage.getItem("loginMobile");
        if (i == 0) {
          this.type = '已完成';
          this.$api.post(this.$api.baseURLSchool, "selecttype_view/view_patient_medical/0?pid=" + this.pid +
            "&clinic_id=" + this.userid + "&status=1", params, r => {
              this.totalNum = r.data.records; //总数据
              if (this.sentPage.page == 1) {
                this.list = r.data.rows;
              } else {
                this.list = this.list.concat(r.data.rows);
              }
              if (r.data.rows.length == 0 && this.sentPage.page > 1) {
                this.$utils._toast("暂无更多数据");
              }
              if (this.totalNum == this.list.length) {
                this.allLoaded = true;
              }

            }, err => {
              console.log(err);
            })
        }
        if (i == 1) {
          this.type = '未完成';
          this.list = [];
          this.$api.post(this.$api.baseURLSchool, "selecttype_view/view_patient_medical/0?pid=" + this.pid +
            "&clinic_id=" + this.userid + "&status=0", params, r => {

              this.totalNum = r.data.records; //总数据

              if (this.sentPage.page == 1) {
                this.list = r.data.rows;
              } else {
                this.list = this.list.concat(r.data.rows);
              }

              if (r.data.rows.length == 0 && this.sentPage.page > 1) {
                this.$utils._toast("暂无更多数据");
              }
              if (this.totalNum == this.list.length) {
                this.allLoaded = true;
              }

            }, err => {
              console.log(err);
            })
        }
      },
      //获取患者病历列表
      getMedicalList(params) { //1已完成 0未完成   
        this.userid = localStorage.getItem("loginMobile");
        this.pid = this.$route.query.pid;
        localStorage.setItem('pid', JSON.stringify(this.pid))
        if (this.pid) { //从患者进入
          this.$api.post(this.$api.baseURLSchool, "selecttype_view/view_patient_medical/0?pid=" + this.pid +
            "&clinic_id=" + this.userid + "&status=1", params, r => {
              this.totalNum = r.data.records; //总数据
              if (this.sentPage.page == 1) {
                this.list = r.data.rows;
              } else {
                this.list = this.list.concat(r.data.rows);
              }

              if (r.data.rows.length == 0 && this.sentPage.page > 1) {
                this.$utils._toast("暂无更多数据");
              }
              if (this.totalNum == this.list.length) {
                this.allLoaded = true;
              }

            }, err => {
              console.log(err);
            })
        }
      },
      //上拉加载
      loadBottom() {
        (this.sentPage.page) ++;
        setTimeout(() => {
          this.getMedicalList(this.sentPage);
        }, 20);
        if (this.totalNum == this.list.length) {
          this.allLoaded = true;
        }
        this.$refs.loadmore.onBottomLoaded();
      },
      //初始化
      init() {
        this.name = localStorage.getItem('type')
        if (this.name == '"doctor"') {
          this.name = 'doctor'
        } else {
          this.name != 'doctor'
        }
        // this.$api.get(this.$api.baseURLSchool, "selectdata2/user_relative?user_id=" + this.userid +
        //   "&type_name=user&name=approve&type=approve&img_url=个人基本资料", {}, r => {
        //     console.log('data', r.data);
        //     if (r.data.ret == 1) {
        //       const docData = JSON.parse(r.data.info[0].content);
        //       this.doctorname = docData.name;
        //     }
        //   }, err => {
        //     console.log(err);
        //   })
      },

    },
    created() {
    //   this.init();
      this.getMedicalList(this.sentPage);
    },
    mounted() {

    }
  }

</script>
<style lang="scss" scoped>
  .mc {
    padding-top: 115px;
    img {
      display: block;
      margin: 0 auto;
    }
    p {
      padding-top: 10px;
      text-align: center;
      font-size: 17px;
      color: rgba(51, 51, 51, 1);
    }
  }

  .nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 10px;
  }

  .active {
    color: #2eda97 ;
  }

</style>
